<template>
    <div class="wrap">
        <head-title :title="headText" @callback="onClickLeft"></head-title>
        <div class="wrapbd">
            <tabs>
                <tab>
                    <div slot="title">链接1</div>
                    <div class="qrcode" id="qrcode1" ref="qrcode1"></div>
                    <span class="yj">团队总业绩 {{rid1_total}}</span>
                    <p>扫描二维码，分享给好友</p>
                </tab>
                <tab>
                    <div slot="title">链接2</div>
                    <div class="qrcode" id="qrcode2" ref="qrcode2" v-show="rid2 != ''"></div>
                    <span class="yj" v-show="rid2 != ''">团队总业绩 {{rid2_total}}</span>
                    <p v-show="rid2 == ''" style="padding:1rem 0 0">暂无二维码</p>
                    <p v-show="rid2 != ''">扫描二维码，分享给好友</p>
                </tab>
            </tabs>
        </div>
        <tabbar :num ="num"></tabbar>
    </div>
</template>
<script>
    import tabbar from "./../../components/tabbar.vue";
    import HeadTitle from "./../../components/title.vue";
    import QRCode from 'qrcodejs2'
    import { Tab, Tabs } from 'vant';
    export default {
        data(){
            return {
                headText:'分享二维码',
                num: 3,
                rid1_total:'0',
                rid2_total:'0',
                rid1:'',
                rid2:'',
                url1:'',
                url2:'',
            }
        },
        created(){
            this.qrcode();
        },
        methods:{
			//返回
			onClickLeft () { this.$router.push('/user');},
      qrcodeUrl(){
          let _this = this;
          let qrcode1 = new QRCode('qrcode1', {
              text: _this.url1, // 二维码内容
          });
          let qrcode2 = new QRCode('qrcode2', {
              text: _this.url2, // 二维码内容
          })
      },
      qrcode(){
				let _this = this;
				this.Tools.AXIOS({
					url:'user/qrcode',
					success: function(res){
                        _this.rid1 = res.data.data.rids.rid1;
                        _this.rid2 = res.data.data.rids.rid2;
                        _this.rid1_total = res.data.data.rids.rid1_total;
                        _this.rid2_total = res.data.data.rids.rid2_total;
                        _this.url1 = res.data.data.host + '/#/register?path=1&uid=' + window.localStorage.getItem('user_id');
                        _this.url2 = res.data.data.host + '/#/register?path=2&uid=' + window.localStorage.getItem('user_id');
                        _this.qrcodeUrl();   //生成二维码
                    },
                    error(res){}
				})
      }
        },
		components: {
            tabbar,
            HeadTitle,
            Tab,
            Tabs,
		},
    }
</script>
<style scoped>
    .wrapbd{ background: #fff; padding-bottom: 1.5rem;}
    .yj{ text-align: center; font-size: .4rem; margin: .5rem auto; display: block; color: red;}
    .qrcode{ width:50%; background: #ccc; margin: 2.2rem auto 0; text-align: center; line-height: 6rem; font-size: .35rem;}
    .qrcode img{ width: 100%;}
    p{ text-align: center; margin-top: .5rem; font-size: .35rem;}
</style>
